<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>从窗口访问弹窗</title>
	</head>
	<body>
		<button id="open">从窗口访问弹窗</button>
		<button id="open2">打开 / 地址的窗口，表示当前网站的根目录</button>

		<script>
			const open = document.querySelector('#open')
			open.addEventListener('click', (e) => {
				// 'about:blank' 是特殊的 URL 地址，它表示一个空白页面。
				const newWin = window.open('about:blank', 'hello', 'width=200,height=200')
				newWin.document.write('Hello, world!')
			})

			// ***************************************************************************************

			const open2 = document.querySelector('#open2')
			open2.addEventListener('click', (e) => {
				// '/' 表示当前网站的根目录.newWindow 表示加载完成的新窗口的窗口对象，可以用来操作当前窗口和设置内容。
				const newWindow = window.open('/', 'example', 'width=500,height=500,top=500,left=500')

				// 弹出 url 地址
				alert(newWindow.location.href)

				// 新窗口加载完成后
				newWindow.addEventListener('load', () => {
					let html = `<div style="font-size:30px;">Welcome!</div>`
					newWindow.document.body.insertAdjacentHTML('afterbegin', html) // 将字符串 html 片段插入到 body 开头
				})
			})

			// ***************************************************************************************

			// 同源策略：只有在窗口是同源的时，窗口才能自由访问彼此的内容（相同的协议://domain:prot）。
		</script>
	</body>
</html>
